<template>
    <div>
        <header class="base-header" style="z-index:111;">
            <h1>购物车</h1>
            <div class="nav" @tap='setEdit' v-if="data.cartList.length>0">
                <span>{{isEdit?'编辑':'完成'}}</span>
            </div>
        </header>
        
        <!-- <div class="main"> -->
            <mui-scroll-refresh top='60px' bottom="100px" :autodown='autodow'>
                <div class="cartnone" v-if="!data.cartList.length>0">
                    <img src="../../public/images/nocarts.png" style="width:160px;" alt="" >
                    <p>购物车为空</p>
                </div>
                
                <div class="item" v-for="(row, item) in data.cartList">
                    <div class="store-line">
                        <div class="checkbox" :class="{active : item.active === true }"  @tap='chooesGood(row)'>
                            <input type="checkbox">
                        </div>
                        <i></i>
                        <h2>{{item.userName}}</h2>
                    </div>
                    <div class="goods-line" v-for="(index, goods) in item.items">
                        <div class="check">
                            <div class="checkbox" :class="{active : goods.active === true }" @tap='chooesGood(row, index)'>
                                <input type="checkbox">
                            </div>
                        </div>
                        <div class="details">
                            <img :src="goods.imageUrl" @tap='lookGoods(goods.goodsId)' class="goods-line-img">
                            <div class="title">
                                <h3 @tap='lookGoods(goods.goodsId)'>{{goods.goodsName}}</h3>
                                <div class="integral">
                                    {{goods.point}}积分
                                </div>
                                <div class="mui-numbox number" v-if="isEdit"  data-numbox-min='1' @tap="changeQuantity(goods.goodsNum,goods.id,row,index)">
                                    <!-- "-"按钮，点击可减小当前数值 -->
                                    <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
                                    <!-- <input class="mui-numbox-input" type="number" v-model="goods.goodsNum" /> -->
                                    <goods-num  :Num='goods.goodsNum' :lev1='row' :lev2='index' :store='store'></goods-num>
                                    <!-- "+"按钮，点击可增大当前数值 -->
                                    <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </mui-scroll-refresh>
        <!-- </div> -->
        
        
        <footer>
            <div class="count" v-if="data.cartList.length>0">
                <div class="checkbox" v-if="isEdit" :class="{ active : data.isCheckAll === true}" @tap='checkAll()'>
                    <input type="checkbox">
                </div>
                <span class="checkbox-title" v-if="isEdit">全选</span>
                <div class="all-integral" >
                   <div v-if="isEdit">合计&nbsp;<span >{{ data.settlement }}</span>&nbsp;积分</div>
                </div>
                <div class="settlement" @tap="settlement()" v-if="isEdit">
                    去结算
                </div>
                <div class="settlement dele-cart" @tap="dele" v-if="!isEdit">
                    刪除
                </div>
            </div>
            <div class="base-manu" style="background-color:#ffffff" ;>
                <a class="manu index-link" href="../../mallHome/index.html">
                    首页
                </a>
            <a class="manu cart-link active" >
                    购物车
              <!-- <b class="shop1" v-if="data.count">{{data.count}}</b>
                </a> -->
            <a class="manu user-link" href="../../we/index.html">
                    我的
                </a>
            </div>
        </footer>
        <div class="mui-backdrop" v-if="getNow">
          <div class="get-now">
            <div class="closeBtn" @tap='getNow = !getNow'>&times;</div>
            <div class="mui-numbox-wrap">
              <span>修改数量</span>
              <div class="mui-numbox number" data-numbox-max='100'>
                <!-- "-"按钮，点击可减小当前数值 -->
                <button class="mui-btn mui-numbox-btn-minus" type="button" @tap='sub'>-</button>
                <input class="mui-numbox-input" type="number" v-model="goodsNum" />
                <!-- "+"按钮，点击可增大当前数值 -->
                <button class="mui-btn mui-numbox-btn-plus" type="button" @tap='add'>+</button>
              </div>
            </div>
            <div class="btn-wrap" @tap='goToSettlement'>
              确认
            </div>
          </div>
        </div>
    </div>
</template>

<script>
  require('../../public/images/goods.png');
  import store from '../shopping-store';
  import scrollRefresh from '../../public/components/mui-scroll-refresh/mui-scroll-refresh.vue';
  import goodsNum from './goodsNum.vue';
  export default {
    data: function () {    // 组件的数据格式
      return {
        data: store.state,
        store: store,
        autodow: true,
        isEdit: true,
        getNow: false,
        goodsNum: 1,
        goodsId: 1,
        row: 1,
        index: 1
      };
    },
    created: function () {
      // 运行 数据中转站的函数
      // store.getCarts();
    //   store.getCartList();
    },
    components: {
      'mui-scroll-refresh': scrollRefresh,
      'goods-num': goodsNum
    },
    ready: function () {
      mui('.mui-scroll-wrapper').scroll();
    },
    events: {
      pullRefreshReady: function (scroll) {
        store.setScroll(scroll);
      },
      pulldown: function () {
        store.getCartListUP();
      },
      pullup: function () {
        store.getCartList();
      }
    },
    methods: {
      goGoodsDetail: function (id) {
        window.location.href = '../../mallHome/index.html#/goods/' + id;
      },
      lookGoods: function (id) {
        store.lookGoodsDetail(id);
      },
      setEdit: function () {
        this.isEdit = !this.isEdit;
        store.setNotActive();
      },
      dele: function () {
        store.deleCart();
      },
      sub: function () {
        this.goodsNum = (this.goodsNum - 1) > 0 ? (this.goodsNum - 1) : 1;
      },
      add: function () {
        this.goodsNum = ++this.goodsNum;
      },
      addGoodsNum: function (row, index) {
        store.addGoodsNum(row, index);
      },
      checkAll: function () {
        store.checkAll();
      },
      subGoodsNum: function (row, index) {
        store.subGoodsNum(row, index);
      },
      chooesGood: function (row, index) {
        store.chooesGood(row, index);
      },
      changeQuantity: function (quantity, id, row, index) {
        this.goodsNum = quantity;
        this.getNow = !this.getNow;
        this.goodsId = id;
        this.row = row;
        this.index = index;
      },
      goToSettlement: function () {
        store.changeNum(this.goodsId, parseInt(this.goodsNum), this.row, this.index);
        this.getNow = !this.getNow;
      },
      settlement: function () {
        if (this.data.settlementData.length > 0) {
          var settlementurl = this.data.settlementurl;
          settlementurl['AddressId'] = 0;
          this.$router.go({name: 'settlement', params: {'data': JSON.stringify(settlementurl)}});
        } else {
          mui.alert('未选中商品');
        }
      }
    },
    watch: {
      // 监听路由变化对详情数据进行更新
      '$route' (to, from) {
        if (to.params.id) {
          store.getDetail(to.params.id);
        }
      },
      goodsNum: function (val) {
        if (val <= 0) {
          this.goodsNum = 1;
        }
      }
    }
  };
</script>
